<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站账号限制页面样式集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #3B82F6;
      --warning: #F59E0B;
      --danger: #EF4444;
      --success: #10B981;
      --dark: #1F2937;
      --light: #F9FAFB;
      --gray: #6B7280;
      --light-gray: #E5E7EB;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light);
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 20px 0;
    }
    
    .container {
      max-width: 400px;
      margin: 0 auto;
      padding: 0 16px;
    }
    
    .blackroom-page {
      display: none;
      background-color: white;
      border-radius: 12px;
      padding: 30px 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
    
    .blackroom-page.active {
      display: block;
      animation: fadeIn 0.5s ease;
    }
    
    .icon-container {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
      font-size: 32px;
    }
    
    .icon-warning {
      background-color: rgba(245, 158, 11, 0.1);
      color: var(--warning);
    }
    
    .icon-danger {
      background-color: rgba(239, 68, 68, 0.1);
      color: var(--danger);
    }
    
    .icon-info {
      background-color: rgba(59, 130, 246, 0.1);
      color: var(--primary);
    }
    
    .page-title {
      font-size: 22px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 16px;
      color: var(--dark);
    }
    
    .page-description {
      font-size: 15px;
      color: var(--gray);
      text-align: center;
      line-height: 1.6;
      margin-bottom: 24px;
    }
    
    .details-list {
      background-color: var(--light);
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 24px;
    }
    
    .details-item {
      display: flex;
      margin-bottom: 12px;
      font-size: 14px;
    }
    
    .details-item:last-child {
      margin-bottom: 0;
    }
    
    .details-label {
      flex: 0 0 90px;
      color: var(--gray);
      font-weight: 500;
    }
    
    .details-value {
      flex: 1;
      color: var(--dark);
    }
    
    .reason-list {
      text-align: left;
      margin-bottom: 24px;
      padding-left: 0;
    }
    
    .reason-item {
      font-size: 14px;
      color: var(--gray);
      margin-bottom: 8px;
      padding-left: 24px;
      position: relative;
      line-height: 1.5;
    }
    
    .reason-item:before {
      content: "•";
      position: absolute;
      left: 8px;
      color: var(--danger);
      font-weight: bold;
    }
    
    .countdown-container {
      background-color: var(--light);
      border-radius: 8px;
      padding: 16px;
      text-align: center;
      margin-bottom: 24px;
    }
    
    .countdown-title {
      font-size: 14px;
      color: var(--gray);
      margin-bottom: 8px;
    }
    
    .countdown-timer {
      font-size: 20px;
      font-weight: 600;
      color: var(--dark);
    }
    
    .appeal-section {
      background-color: rgba(59, 130, 246, 0.05);
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 24px;
    }
    
    .appeal-title {
      font-size: 16px;
      font-weight: 500;
      color: var(--primary);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .appeal-description {
      font-size: 14px;
      color: var(--gray);
      margin-bottom: 0;
      line-height: 1.5;
    }
    
    .btn-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .btn {
      padding: 12px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
      border: none;
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-primary:hover {
      background-color: #2563EB;
    }
    
    .btn-outline {
      background-color: transparent;
      color: var(--primary);
      border: 1px solid var(--primary);
    }
    
    .btn-outline:hover {
      background-color: rgba(59, 130, 246, 0.05);
    }
    
    .btn-link {
      background-color: transparent;
      color: var(--gray);
      padding: 8px 0;
      font-size: 14px;
    }
    
    .btn-link:hover {
      color: var(--primary);
    }
    
    .policy-link {
      color: var(--primary);
      text-decoration: none;
    }
    
    .policy-link:hover {
      text-decoration: underline;
    }
    
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      width: 200px;
    }
    
    .switcher-header {
      padding: 12px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid var(--light-gray);
      color: var(--dark);
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      color: var(--dark);
    }
    
    .switcher-option:hover {
      background-color: var(--light);
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @media (max-width: 360px) {
      .blackroom-page {
        padding: 24px 16px;
      }
      
      .page-title {
        font-size: 20px;
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">小黑屋页面样式</div>
    <div class="switcher-option active" data-style="1">内容限制警告</div>
    <div class="switcher-option" data-style="2">临时功能限制</div>
    <div class="switcher-option" data-style="3">短期封禁</div>
    <div class="switcher-option" data-style="4">长期封禁</div>
    <div class="switcher-option" data-style="5">永久封禁</div>
  </div>
  
  <div class="container">
    <!-- 1. 内容限制警告 -->
    <div class="blackroom-page active" id="style1">
      <div class="icon-container icon-warning">
        <i class="fa fa-exclamation-triangle"></i>
      </div>
      
      <h1 class="page-title">内容发布限制警告</h1>
      
      <p class="page-description">
        您的内容因涉嫌违反社区规范已被限制展示。请遵守平台规则，避免进一步限制。
      </p>
      
      <div class="details-list">
        <div class="details-item">
          <div class="details-label">限制类型</div>
          <div class="details-value">内容展示限制</div>
        </div>
        <div class="details-item">
          <div class="details-label">限制时间</div>
          <div class="details-value">2023-10-28 14:30</div>
        </div>
        <div class="details-item">
          <div class="details-label">相关内容</div>
          <div class="details-value">《周末聚会照片分享》</div>
        </div>
      </div>
      
      <p class="page-description">
        违反的社区规范：<a href="#" class="policy-link">《社区内容发布规范》第3.2条</a>
      </p>
      
      <div class="btn-container">
        <button class="btn btn-primary">查看详情</button>
        <button class="btn btn-outline">申诉</button>
        <button class="btn btn-link">了解社区规范</button>
      </div>
    </div>
    
    <!-- 2. 临时功能限制 -->
    <div class="blackroom-page" id="style2">
      <div class="icon-container icon-info">
        <i class="fa fa-lock"></i>
      </div>
      
      <h1 class="page-title">部分功能临时限制</h1>
      
      <p class="page-description">
        由于您的账号近期有异常活动，部分社交互动功能已被临时限制，以保护账号安全。
      </p>
      
      <div class="details-list">
        <div class="details-item">
          <div class="details-label">限制功能</div>
          <div class="details-value">评论、私信、关注</div>
        </div>
        <div class="details-item">
          <div class="details-label">限制开始</div>
          <div class="details-value">2023-10-28 09:15</div>
        </div>
        <div class="details-item">
          <div class="details-label">预计解除</div>
          <div class="details-value">2023-10-28 21:15</div>
        </div>
      </div>
      
      <div class="countdown-container">
        <div class="countdown-title">功能限制剩余时间</div>
        <div class="countdown-timer">10小时 30分钟</div>
      </div>
      
      <div class="btn-container">
        <button class="btn btn-primary">完成安全验证</button>
        <button class="btn btn-outline">查看限制原因</button>
        <button class="btn btn-link">联系客服</button>
      </div>
    </div>
    
    <!-- 3. 短期封禁 -->
    <div class="blackroom-page" id="style3">
      <div class="icon-container icon-danger">
        <i class="fa fa-ban"></i>
      </div>
      
      <h1 class="page-title">账号短期封禁</h1>
      
      <p class="page-description">
        您的账号因违反社区规范已被短期封禁。封禁期间将无法使用平台大部分功能。
      </p>
      
      <div class="details-list">
        <div class="details-item">
          <div class="details-label">封禁开始</div>
          <div class="details-value">2023-10-28 10:00</div>
        </div>
        <div class="details-item">
          <div class="details-label">封禁结束</div>
          <div class="details-value">2023-10-30 10:00</div>
        </div>
        <div class="details-item">
          <div class="details-label">剩余时间</div>
          <div class="details-value">1天 18小时</div>
        </div>
      </div>
      
      <p class="page-description">违规原因：</p>
      
      <ul class="reason-list">
        <li class="reason-item">发布含有不适当内容的帖子，违反社区规范</li>
        <li class="reason-item">多次收到其他用户举报并核实有效</li>
        <li class="reason-item">此前已有2次警告记录未予改正</li>
      </ul>
      
      <div class="appeal-section">
        <div class="appeal-title">
          <i class="fa fa-gavel"></i> 您可以申诉
        </div>
        <p class="appeal-description">
          如果您认为此次封禁有误，可以提交申诉。我们将在24小时内审核您的申诉内容。
        </p>
      </div>
      
      <div class="btn-container">
        <button class="btn btn-primary">提交申诉</button>
        <button class="btn btn-outline">查看社区规范</button>
        <button class="btn btn-link">联系客服</button>
      </div>
    </div>
    
    <!-- 4. 长期封禁 -->
    <div class="blackroom-page" id="style4">
      <div class="icon-container icon-danger">
        <i class="fa fa-shield"></i>
      </div>
      
      <h1 class="page-title">账号长期封禁</h1>
      
      <p class="page-description">
        您的账号因严重违反社区规范已被长期封禁30天。封禁期间将无法使用平台任何功能。
      </p>
      
      <div class="details-list">
        <div class="details-item">
          <div class="details-label">封禁开始</div>
          <div class="details-value">2023-10-28 08:30</div>
        </div>
        <div class="details-item">
          <div class="details-label">封禁结束</div>
          <div class="details-value">2023-11-27 08:30</div>
        </div>
        <div class="details-item">
          <div class="details-label">违规等级</div>
          <div class="details-value">严重违规</div>
        </div>
      </div>
      
      <p class="page-description">违规详情：</p>
      
      <ul class="reason-list">
        <li class="reason-item">发布涉及人身攻击和骚扰的内容</li>
        <li class="reason-item">多次发布垃圾信息和广告刷屏</li>
        <li class="reason-item">此前已因同类违规被短期封禁2次</li>
      </ul>
      
      <div class="appeal-section">
        <div class="appeal-title">
          <i class="fa fa-info-circle"></i> 申诉说明
        </div>
        <p class="appeal-description">
          您可以提交一次申诉。请提供详细说明和证据，我们的审核团队将在3个工作日内处理您的申诉。
        </p>
      </div>
      
      <div class="btn-container">
        <button class="btn btn-primary">提交申诉</button>
        <button class="btn btn-outline">查看完整违规记录</button>
        <button class="btn btn-link">阅读社区规范全文</button>
      </div>
    </div>
    
    <!-- 5. 永久封禁 -->
    <div class="blackroom-page" id="style5">
      <div class="icon-container icon-danger">
        <i class="fa fa-user-times"></i>
      </div>
      
      <h1 class="page-title">账号永久封禁</h1>
      
      <p class="page-description">
        您的账号因严重且多次违反社区规范，已被永久封禁。此决定为最终处理结果。
      </p>
      
      <div class="details-list">
        <div class="details-item">
          <div class="details-label">封禁时间</div>
          <div class="details-value">2023-10-28 11:45</div>
        </div>
        <div class="details-item">
          <div class="details-label">账号状态</div>
          <div class="details-value">永久封禁，不可恢复</div>
        </div>
        <div class="details-item">
          <div class="details-label">违规类型</div>
          <div class="details-value">严重违反平台核心规范</div>
        </div>
      </div>
      
      <p class="page-description">主要违规行为：</p>
      
      <ul class="reason-list">
        <li class="reason-item">发布违法违规内容，包含暴力、仇恨信息</li>
        <li class="reason-item">多次冒充他人并进行诈骗活动</li>
        <li class="reason-item">规避平台限制，多次创建违规账号</li>
        <li class="reason-item">无视多次警告和临时封禁处罚</li>
      </ul>
      
      <p class="page-description">
        根据<a href="#" class="policy-link">《用户服务协议》</a>和<a href="#" class="policy-link">《社区规范》</a>，此账号已被永久封禁，所有内容将被隐藏。
      </p>
      
      <div class="btn-container">
        <button class="btn btn-outline">查看封禁政策</button>
        <button class="btn btn-link">联系客服咨询</button>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前选中的样式
    let currentStyle = '1';
    
    // 获取DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const blackroomPages = {
      '1': document.getElementById('style1'),
      '2': document.getElementById('style2'),
      '3': document.getElementById('style3'),
      '4': document.getElementById('style4'),
      '5': document.getElementById('style5')
    };
    
    // 切换小黑屋页面样式
    function switchStyle(style) {
      // 隐藏所有页面
      Object.values(blackroomPages).forEach(page => {
        page.classList.remove('active');
      });
      
      // 显示选中的样式
      if (blackroomPages[style]) {
        blackroomPages[style].classList.add('active');
        currentStyle = style;
      }
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
    }
    
    // 样式切换事件
    switcherOptions.forEach(option => {
      option.addEventListener('click', function() {
        const style = this.getAttribute('data-style');
        switchStyle(style);
      });
    });
    
    // 按钮点击事件
    document.querySelectorAll('.btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const btnText = this.textContent.trim();
        console.log(`点击了按钮: ${btnText}`);
        
        // 模拟申诉成功的反馈
        if (btnText === '提交申诉') {
          alert('申诉已提交，我们将尽快处理您的请求');
        }
        
        // 模拟安全验证成功
        if (btnText === '完成安全验证') {
          alert('安全验证已完成，功能限制将在10分钟内解除');
        }
      });
    });
  </script>
</body>
</html>
